<template>
    <div class="main-container">
        <!-- 控制面板 -->
        <div class="control-panel">
            <el-radio-group v-model="isSimpleMeterVisible">
                <el-radio :value="false">完整计量网络图</el-radio>
                <el-radio :value="true">简略计量网络图</el-radio>
            </el-radio-group>
        </div>
        <!-- 树形图主体 -->
        <div class="container">
            <MeterStructure @refresh="handleRefresh" v-if="!isSimpleMeterVisible" :meterList="meterList"
                :treeData="treeData"></MeterStructure>
            <SimpleMeterStructure v-if="isSimpleMeterVisible" :meterList="meterList" :treeData="treeData">
            </SimpleMeterStructure>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import MeterStructure from '@/components/meter/MeterStructure.vue';
import SimpleMeterStructure from '@/components/meter/SimpleMeterStructure.vue';
const emit = defineEmits(['refresh']);
function handleRefresh() {
    emit('refresh');
}
// 接收props
const props = defineProps({
    meterList: {
        type: Array,
        default: () => []
    },
    treeData: {
        type: Array,
        default: () => []
    }
});

// 控制是否显示简略计量网络图
const isSimpleMeterVisible = ref(false);
</script>

<style lang="scss" scoped>
.main-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;

    .container {
        flex: 1;
        overflow: auto;
    }
}
</style>
